import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Table, Button, Modal } from 'antd'
import { DeleteOutlined, EditOutlined, ExclamationCircleFilled } from '@ant-design/icons';

const { confirm } = Modal;


export default function RoleList() {

  const showDeleteConfirm = (item) => {
    console.log(item);
    confirm({
      title: '您确定要删除这个权限吗?',
      icon: <ExclamationCircleFilled />,
      content: '删除后将无法恢复，请谨慎操作！',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        console.log('OK');
        setDataScource(dataScoure.filter(data => item.id!== data.id));
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  const [dataScoure, setDataScource] = useState([])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      render: id => <span>{id}</span>,
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'name',
      render: roleName => <span>{roleName}</span>,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (_, record) => {
        return (
          <div>
            <Button danger shape='circle' icon={<DeleteOutlined />} 
              onClick={() => showDeleteConfirm(record)}>
            </Button>
            <Button type='primary' shape='circle' icon={<EditOutlined />} 
              >
            </Button>
          </div>
        )
      },
    }
  ];
  useEffect(() => {
    axios.get('http://localhost:8001/roles').then(res => {
      setDataScource(res.data)
    })
  }, [])
  return (
    <div>
      <Table columns={columns} dataSource={dataScoure} rowKey={(item)=>item.id}/>
    </div>
  )

  
} 